messageTray: Put the notification widget in the center

Rather than stretching the entire screen length

https://bugzilla.gnome.org/show_bug.cgi?id=682253

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 03ca0950eccce8f39a4dc5c9c8c59450206c8ea1..cfdefd87d005d3cbb482358ffaa0d8c830c3bc36 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1183,12 +1183,15 @@ StButton.popup-menu-item:insensitive {
 }
 
 .notification {
-    font-size: 11pt;
     border-radius: 10px 10px 0px 0px;
     background: rgba(0,0,0,0.8);
     padding: 8px 8px 4px 8px;
     spacing-rows: 10px;
     spacing-columns: 10px;
+}
+
+.notification, #notification-container {
+    font-size: 11pt;
     width: 34em;
 }
 

diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index c59f6e26efafd87600f5a6aea1b72edf22f5d318..95044a19c65b6d7203baca660a9762c9797b9ae3 100644 (file)
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1352,9 +1352,11 @@ const MessageTray = new Lang.Class({
         this.actor = new St.Widget({ name: 'message-tray',
                                      reactive: true,
                                      track_hover: true });
+        this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
         this.actor.connect('notify::hover', Lang.bind(this, this._onTrayHoverChanged));
 
-        this._notificationWidget = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this._notificationWidget = new St.Widget({ name: 'notification-container',
+                                                   layout_manager: new Clutter.BinLayout() });
         this.actor.add_actor(this._notificationWidget);
 
         this._notificationBin = new St.Bin();
@@ -1455,11 +1457,11 @@ const MessageTray = new Lang.Class({
         Main.layoutManager.trackChrome(this._notificationWidget);
         Main.layoutManager.trackChrome(this._closeButton);
 
-        Main.layoutManager.connect('monitors-changed', Lang.bind(this, this._setSizePosition));
+        Main.layoutManager.connect('monitors-changed', Lang.bind(this, function() {
+            this.actor.style_changed();
+        }));
         Main.layoutManager.connect('primary-fullscreen-changed', Lang.bind(this, this._onFullscreenChanged));
 
-        this._setSizePosition();
-
         Main.overview.connect('showing', Lang.bind(this,
             function() {
                 this._overviewVisible = true;
@@ -1499,10 +1501,11 @@ const MessageTray = new Lang.Class({
         this._updateState();
     },
 
-    _setSizePosition: function() {
+    _onStyleChanged: function() {
         let monitor = Main.layoutManager.bottomMonitor;
-        this._notificationWidget.x = 0;
-        this._notificationWidget.width = monitor.width;
+
+        let width = this._notificationWidget.get_width();
+        this._notificationWidget.x = Math.floor((monitor.width - width) / 2);
         this._summaryBin.x = 0;
         this._summaryBin.width = monitor.width;